<template>
    <div class="yhgl_wrap">
        <div class="page-content">
            <div class="header-box">

                <div class="btn-group">
                    <el-button class="hy_btn is_primary" type="primary" @click="btnClick()"><img src="../../assets/images/yhgl/icon_add.png" alt="">新增</el-button>
                    <el-button class="hy_btn"><img src="../../assets/images/yhgl/icon_delete.png" alt="">删除</el-button>
                    <el-button class="hy_btn" :disabled="multipleSelection.length>1"><img src="../../assets/images/yhgl/icon_edit.png" alt="">修改</el-button>
                </div>
            </div>

            <div class="table-box">
                <el-table
                        :data="tableData"
                        class="hy_table"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column
                            type="selection"
                            align="center"
                            width="60px">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            width="200px"
                            label="登录名">
                    </el-table-column>
                    <el-table-column
                            prop="fullname"
                            width="200px"
                            label="用户名">
                    </el-table-column>
                    <el-table-column
                            prop="group"
                            label="所属角色">
                    </el-table-column>
                    <el-table-column
                            prop="createDate"
                            label="注册时间">
                    </el-table-column>
                    <el-table-column
                            prop="lastLogin"
                            align="center"
                            label="上次登录时间">
                    </el-table-column>
                    <el-table-column
                            prop=""
                            width="120px"
                            label="操作">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="viewPower( scope.row )">查看授权</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

<!--            <el-pagination-->
<!--                    class="hy-pagination"-->
<!--                    @size-change="handleSizeChange"-->
<!--                    @current-change="handleCurrentChange"-->
<!--                    :current-page="currentPage"-->
<!--                    background-->
<!--                    :page-sizes="[10, 20, 50, 100]"-->
<!--                    :page-size="pageSize"-->
<!--                    layout="total, sizes, prev, pager, next"-->
<!--                    :total="totalPage">-->
<!--            </el-pagination>-->
        </div>

        <div style="height: 28px;"></div>

        <ControlDialog ref="controlDialog"
                       :dialogTitle="dialogTitle"
                       :fromList="fromList"
        ></ControlDialog>

        <PowerDialog ref="powerDialog"
                     :treeList="treeList"
        ></PowerDialog>
    </div>
</template>

<script>
    import ControlDialog from '../ControlDialog';
    import PowerDialog from './modules/PowerDialog';

    export default {
        components: {
            ControlDialog,
            PowerDialog,
        },
        data() {
            return {
                value: '',
                value1: [new Date(), new Date()],
                options: [],
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                totalPage: 0,
                dialogTitle: '新增用户',
                fromList: [
                    {
                        name: '登录名',
                        type: 'input',
                        label: 'name1',
                        isRules: true,
                    },
                    {
                        name: '用户名称',
                        type: 'input',
                        label: 'name2',
                        isRules: true,
                    },
                    {
                        name: '密码',
                        type: 'input',
                        label: 'name5',
                        isRules: true,
                    },
                    {
                        name: '所属角色',
                        type: 'select',
                        label: 'name7',
                        option: [],
                    },
                    {
                        name: '公司',
                        type: 'input',
                        label: 'name6',
                        isRules: true,
                    },
                    {
                        name: '部门',
                        type: 'input',
                        label: 'name6',
                        isRules: true,
                    },
                    {
                        name: '职位',
                        type: 'input',
                        label: 'name6',
                        isRules: true,
                    },
                    {
                        name: '邮箱',
                        type: 'input',
                        label: 'name6',
                        isRules: true,
                    },
                    {
                        name: '地址',
                        type: 'input',
                        label: 'name6',
                        isRules: true,
                    },
                    {
                        name: '联系电话',
                        type: 'input',
                        label: 'name6',
                        isRules: true,
                    },
                    {
                        name: '注册时间',
                        type: 'input',
                        label: 'name6',
                    },
                    {
                        name: '账号有效期至',
                        type: 'datetime',
                        label: 'name6',
                    },
                ],
                treeList: [
                    [
                        {
                            id: 1,
                            label: '监控画面',
                            children: [
                                {
                                    id: 2,
                                    label: '电站概览',
                                },
                                {
                                    id: 3,
                                    label: '主接线图',
                                },
                                {
                                    id: 4,
                                    label: 'PCS监控',
                                },
                                {
                                    id: 5,
                                    label: 'BMS监控',
                                },
                            ]
                        },
                    ],
                    [
                        {
                            id: 1,
                            label: '智能分析',
                            children: [
                                {
                                    id: 2,
                                    label: '系统诊断',
                                },
                                {
                                    id: 3,
                                    label: '辅助决策',
                                },
                                {
                                    id: 4,
                                    label: '诊断结果',
                                },
                            ]
                        },
                    ],
                    [
                        {
                            id: 1,
                            label: '告警日志',
                            children: [
                                {
                                    id: 2,
                                    label: '告警查询',
                                },
                                {
                                    id: 3,
                                    label: '日志查询',
                                },
                                {
                                    id: 4,
                                    label: '诊断查询',
                                },
                            ]
                        },
                    ],
                    [
                        {
                            id: 1,
                            label: '曲线查询',
                        },
                    ],

                ],
                multipleSelection: [],
            }
        },
        methods: {
            getData() {
                this.$api.queryUserList(
                    {
                        // page: this.currentPage - 1,
                        // pageSize: this.pageSize,
                    }
                ).then(( res )=> {
                    console.log("res==》",res)
                    this.totalPage = res.totalCount;
                    this.tableData = res || [];
                })
            },

            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.getData();
            },

            handleCurrentChange(val) {
                this.currentPage = val;
                this.getData();
            },

            btnClick() {
                this.$refs.controlDialog.handleDisabled = false;
                this.$refs.controlDialog.dialogVisible = true;
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            viewPower( item ) {
                console.log(item)
                this.$refs.powerDialog.dialogVisible = true;
            },
        },
        mounted() {
            this.getData();
        }
    }
</script>

<style lang="less">
    .yhgl_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            min-height: 340px;
            padding: 40px;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 8px;

            >.header-box {
                width: 100%;
                height: 40px;
                margin-bottom: 32px;
                line-height: 40px;
                position: relative;

                >.btn-group {
                    position: absolute;
                    right: 0px;
                    top: 0px;

                    .el-button {

                        img {
                            position: relative;
                            top: -0.4px;
                        }
                    }

                    .el-button.hy_btn + .el-button.hy_btn {
                        margin-left: 16px;
                    }
                }
            }

            >.table-box {
                width: 100%;
            }
        }
    }
</style>
